import echarts from "@/views/package/echarts/components/BaseEcharts/utils/echarts";
export function getBarOptions() {
  const parmas = {
    originData: [
      {
        title: "Furniture",
        child: [],
        value: 741999.7952999998,
        style: {
          bar_width: 101, // 柱状体宽度
          bar_color: "#f00", // 柱状体颜色
          label_color: "#f00", // 文本颜色
          label_show: true, // 是否展示文本
          label_fontSize: "18", // 文本字体大小
        },
      },
      {
        title: "Office Supplies",
        child: [],
        value: -719047.0320000029,
        style: {
          bar_width: 50,
          bar_color: "#0f0",
          label_color: "#f00",
          label_show: true,
          label_fontSize: "18",
        },
      },
      {
        title: "Technology",
        child: [],
        value: 836154.0329999966,
        // style: {
        //   bar_width: 100,
        //   bar_color: "#00f",
        //   label_color: "#f00",
        //   label_show: true,
        //   label_fontSize: "18",
        // },
      },
    ],
    showX: true,
    showY: true,
    rowTitle: "Sales销售额",
    minValue: -719047,
    maxValue: 836154.0329999966,
  };

  const { originData, showX, showY, rowTitle, minValue, maxValue } = parmas;
  console.log("bar parmas", parmas);
  if (!originData) {
    console.error("originData is null");
    return null;
  }
  const series = getSeries(originData);
  const tooltip = getTooltip();

  const option = {
    tooltip,
    xAxis: {
      type: "category",
    },

    yAxis: {
      type: "value",
    },
    // tooltip: {
    //   trigger: "axis",
    //   axisPointer: {
    //     type: "shadow",
    //   },
    // },
    legend: {},
    grid: {
      left: "0",
      right: "0",
      bottom: "30",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      axisTick: {
        show: showX, //刻度线
      },
      axisLine: {
        show: showX, //隐藏y轴
        onZero: false, //-----------重点
      },
      axisLabel: {
        show: showX, //隐藏刻度值
      },
    },
    yAxis: {
      name: showY && rowTitle ? rowTitle : "",
      type: "value",
      axisTick: {
        show: showY, //刻度线
      },
      axisLine: {
        show: showY, //隐藏y轴
      },
      axisLabel: {
        show: showY, //隐藏刻度值
        formatter: function (value, index) {
          return addChineseUnit(value);
        },
      },
      splitLine: {
        //网格线
        show: false,
      },
      min: Math.floor(minValue),
      max: Math.floor(maxValue),
    },
    series: series,
  };
  console.log("bar option", option);
  return option;
}

function getSeries(originData) {
  const series = originData.map((item) => {
    const { title, value, style } = item;
    const label_show = style?.label_show ? style.label_show : false; // 是否展示文本
    const label_fontSize = style?.label_fontSize ? style.label_fontSize : "12"; // 展示文本字体大小
    const label_color = style?.label_color ? style.label_color : "#000"; // 展示文本字体颜色
    const bar_width = style?.bar_width ? style.bar_width : 10; // 柱状体宽度
    const bar_color = style?.bar_color ? style.bar_color : "#000"; // 柱状体颜色

    const itemStyleParams = {
      label_show,
      label_fontSize,
      label_color,
    };
    // ['名称','数值','柱状体宽度','柱状体颜色']
    const data = [[title, value, bar_width, bar_color]];
    const itemStyle = getItemStyle(itemStyleParams);
    return {
      type: "custom",
      renderItem: function (params, api) {
        // 对于 data 中的每个 dataItem，都会调用这个 renderItem 函数。
        // （但是注意，并不一定是按照 data 的顺序调用）
        // 这里进行一些处理，例如，坐标转换。
        // 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
        let value = api.value(1);
        let positiveValue = value;
        if (value < 0) {
          positiveValue = -value;
        }
        // console.log('positiveValue',positiveValue);

        // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
        var startPoint = api.coord([api.value(0), positiveValue]);
        var endPoint = api.coord([positiveValue, positiveValue]);
        // 这里使用 api.size(...) 获得 Y 轴上数值范围为 1 的一段所对应的像素长度。
        var height = api.size([0, 1])[1] * positiveValue;
        const width = api.value(2);
        let y = endPoint[1];
        const x = startPoint[0] - width / 2;

        // 处理负数
        if (value < 0) {
          y = y + height;
        }
        // 这里返回为这个 dataItem 构建的图形元素定义。
        return {
          // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
          type: "rect",
          // shape 属性描述了这个矩形的像素位置和大小。
          // 其中特殊得用到了 echarts.graphic.clipRectByRect，意思是，
          // 如果矩形超出了当前坐标系的包围盒，则剪裁这个矩形。

          shape: echarts.graphic.clipRectByRect(
            {
              // 矩形的位置和大小。
              x: x,
              y: y,
              height: height,
              width: width,
            },
            {
              // 当前坐标系的包围盒。
              x: params.coordSys.x,
              y: params.coordSys.y,
              width: params.coordSys.width,
              height: params.coordSys.height,
            }
          ),
          // 用 api.style(...) 得到默认的样式设置。这个样式设置包含了
          // option 中 itemStyle 的配置和视觉映射得到的颜色。
          style: api.style(),
        };
      },
      encode: {
        x: 0, // data 中『维度0』对应到 X 轴
        y: 1, // data 中『维度1』对应到 Y 轴
      },
      itemStyle,
      data,
    };
  });
  return series;
}

function getTooltip() {
  return {
    trigger: "axis",
    formatter: function (params) {
      console.log('params',params);
      const data = params[0].data
      var str = "";
      var span =
        `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${data[3]};"></span>`;
      str = `${span} ${data[0]} : ${data[1]}<br>`;
      return str;
    },
  };
}

function getItemStyle(params) {
  const label_show = params.label_show ? params.label_show : false;
  const label_fontSize = params.label_fontSize ? params.label_fontSize : "12";
  const label_color = params.label_color ? params.label_color : '"#000"';
  return {
    label: {
      formatter: "{c}",
      show: label_show,
      position: "top",
      textStyle: {
        fontWeight: "bolder",
        fontSize: label_fontSize,
        color: label_color,
      },
    },
    color: (param) => {
      const color = param.data[3];
      return color ? color : "#000";
    },
    opacity: 1,
  };
}

function addChineseUnit(number, decimalDigit) {
  decimalDigit = decimalDigit == null ? 2 : decimalDigit;
  var integer = Math.floor(number);
  var digit = getDigit(integer);
  // ['个', '十', '百', '千', '万', '十万', '百万', '千万'];
  var unit = [];
  if (digit > 3) {
    var multiple = Math.floor(digit / 8);
    if (multiple >= 1) {
      var tmp = Math.round(integer / Math.pow(10, 8 * multiple));
      unit.push(addWan(tmp, number, 8 * multiple, decimalDigit));
      for (var i = 0; i < multiple; i++) {
        unit.push("亿");
      }
      return unit.join("");
    } else {
      return addWan(integer, number, 0, decimalDigit);
    }
  } else {
    return number;
  }
}

// 数字转为带单位
const getDigit = (integer) => {
  var digit = -1;
  while (integer >= 1) {
    digit++;
    integer = integer / 10;
  }
  return digit;
};
const addWan = (integer, number, mutiple, decimalDigit) => {
  var digit = getDigit(integer);
  if (digit > 3) {
    var remainder = digit % 8;
    if (remainder >= 5) {
      // ‘十万’、‘百万’、‘千万’显示为‘万’
      remainder = 4;
    }
    return (
      Math.round(number / Math.pow(10, remainder + mutiple - decimalDigit)) /
        Math.pow(10, decimalDigit) +
      "万"
    );
  } else {
    return (
      Math.round(number / Math.pow(10, mutiple - decimalDigit)) /
      Math.pow(10, decimalDigit)
    );
  }
};
